<template>
	<view class="page-box">
		<view v-for="(item,index) in datalist" :key="index">
			<checkbox-group @change="radioChange">
				<view class="box">
					<checkbox :value="index" color="#ff6633" :checked="check" style="transform:scale(0.8)"/>
					<view class="right-box">
						<view class="text1">收件人：<text style="color: #BCB9B9;">{{item.name}}</text></view>
						<view class="text1">联系方式：<text style="color: #BCB9B9;">{{item.tel}}</text></view>
						<view class="text1">地址：<text style="color: #BCB9B9;">{{item.addr}}</text></view>
					</view>
				</view>
			</checkbox-group>
			<view class="btn-box">
				<view class="btn" @click="Jump()">去添加</view>
				<view class="btn" @click="GoDetail()">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datalist:'',
				check:'',
				index:'',
				id:''
			}
		},
		onLoad() {
		
		},
		onShow() {
			uni.showLoading({
				title:"加载中"
			})
			uniCloud.callFunction({
				name:'getAddress',
				data:{	
				},
				success: (rest) => {
					uni.hideLoading()
					console.log('获取地址成功',rest.result.data)
					this.datalist = rest.result.data
				},
				fail: (err) => {
					uni.hideLoading()
					console.log('获取地址失败',err)
				}
			})
		},
		methods: {
			Jump(e){
				uni.navigateTo({
					url:'./add-address'
				})
			},
			radioChange(e){
				this.index = e.detail.value[0]
			},
			GoDetail(){
				let that = this
				let value = {
					name:that.datalist[0].name,
					tel:that.datalist[0].tel,
					addr:that.datalist[0].addr,
				}
				that.$store.commit('getAddress', value);
				setTimeout( () => {
				 uni.redirectTo({
				 	url:'/pages/order/confirm-order'
				 })
				}, 1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.btn-box{
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		}
	.btn{
		width: 48%;
		background-color: #ff6633;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		padding: 20rpx 0rpx;
		border-radius: 40rpx;
		}
	.box{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 50rpx;
		}
	.right-box{
		margin-left: 30rpx;
		width: 550rpx;
		color: #808080;
		font-size: 28rpx;
		}
	.text1{
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 38rpx;
		opacity: 1;
		margin-bottom: 10rpx;
		}
</style>
